<template>
  <div class="dashboard">

    <!-- 顶部角色信息模块 -->
    <div class="top">
      <el-card class="box-card">
        <div class="user-header">
          <div class="main-left">
            <div class="m-left">
              <img src="@/assets/common/my_head_02.png" alt="">
            </div>
            <div class="m-right">
              <h3 class="mr-top">下午好, 璃月人</h3>
              <div class="mr-bottom">原竟是我自己</div>
            </div>
          </div>
          <!-- 顶部 - 中间标签功能 -->
          <div class="main-medium">
            <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              v-if="inputVisible"
              ref="saveTagInput"
              v-model="inputValue"
              class="input-new-tag"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            />
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
          </div>
          <!-- 顶部 - 右侧评分功能 -->
          <div class="main-right">
            <el-rate v-model="star.hard" />
            <el-rate v-model="star.face" />
            <el-rate v-model="star.funny" />
          </div>
        </div>

      </el-card>
    </div>

    <!-- 主体功能模块 -->
    <div class="bottom">
      <!-- 下面分为左右两个部分 -->
      <el-row>
        <!-- 主体: 左侧功能模块 -->
        <el-col :span="13">
          <div class="bottom-left">
            <el-card class="box-card">
              <el-calendar>
                <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                <template
                  slot="dateCell"
                  slot-scope="{date, data}"
                >
                  <div class="my-date">
                    <span>{{ getCurrentDate(data.day) }}</span>
                    <span v-if="isWeekend(date)" class="activeRest">休</span>
                  </div>
                </template>
              </el-calendar>
            </el-card>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>卡片名称</span>
                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
              </div>
              <div v-for="o in 4" :key="o" class="text item">
                {{ '列表内容 ' + o }}
              </div>
            </el-card>
          </div>

        </el-col>
        <!-- 主体: 右侧功能模块 -->
        <el-col :span="11">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              {{ '列表内容 ' + o }}
            </div>
          </el-card>
          <el-card class="box-card">
            <!-- 雷达图: 使用 antV -->
            <!-- npm i @antv/data-set -->
            <!-- npm i @antv/g2 -->
            <radix-com />
          </el-card>
          <el-card class="box-card">
            <div class="last">
              <div class="l-header">
                <span>帮助链接</span>
              </div>
              <div class="l-main">内容</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import RadixCom from './sync/RadixCom.vue'
export default {
  components: { RadixCom },
  data() {
    return {
      // 顶部头像模块 - 右侧功能模块
      // 初始化数组, 包含了所有添加的标签, 用于渲染页面
      // dynamicTags: [],
      // 直接从本地存储中读取标签
      dynamicTags: JSON.parse(localStorage.getItem('my-tab-card')) || [],
      inputVisible: false,
      // 添加标签的输入框双向绑定数据
      inputValue: '',
      star: {
        hard: '',
        face: '',
        funny: ''
      }
    }
  },
  created() {

  },
  methods: {
    // ^ ==================== 事件 ====================
    getCurrentDate(date) {
      // 形参传递的是 data.day 获取到的结果是 2022-12-12 格式
      // 所以需要使用 字符串的 slice 方法, 截取第 8 个往后的字符串, 并赋给变量
      // 返回值时进行去零判断: 使用 startsWith 方法, 如果字符串以 '0' 开头, 就截取第一位往后的字符串
      const currentStrDate = date.slice(8)
      return currentStrDate.startsWith('0') ? currentStrDate.slice(1) : currentStrDate
    },
    // 函数判断当前日期对象, 是否是周末, getDay() 是否是 0 或 6
    isWeekend(date) {
      // date 是一个日期对象, 它是由 new Date() 构造函数 new 出来的 日期对象
      const currentDay = date.getDay()
      if (currentDay === 0 || currentDay === 6) return true
    },
    // * 顶部右侧 - 功能模块
    // 标签关闭事件
    handleClose(tag) {
      // 将当前标签从数组中删除, 并更新本地存储中的数据
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      localStorage.setItem('my-tab-card', JSON.stringify(this.dynamicTags))
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 标签提交事件: 回车和失去焦点都会触发
    handleInputConfirm() {
      const inputValue = this.inputValue
      // 判断: 如果 inputValue 有值, 在回车添加标签时, 将当前用户输入的值添加进渲染标签的数组
      if (inputValue) {
        this.dynamicTags.push(inputValue)
        // 将 标签数组 储存到本地存储
        localStorage.setItem('my-tab-card', JSON.stringify(this.dynamicTags))
      }
      // 重置输入框
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style lang="scss" scoped>
// 首页模块整体样式
.dashboard {
  margin: 15px;

  // 顶部角色信息模块
  .top {
    margin-bottom: 15px;
    // 顶部角色信息模块
    .user-header {
      display: flex;
      align-items: center;
      // 左侧用户头像&用户昵称模块
      .main-left {
        display: flex;
        justify-content: space-between;
        // 用户头像
        .m-left {
          width: 100px;
          height: 100px;
          overflow: hidden;
          border-radius: 50%;
          margin: 0 15px 0;
          // 行内块元素 inline-block 有时候多个图片排列的时候, 图片的底部对不齐, 有一些间隙
          // 一般工作里面需要将图片转换为块元素, 并且通常图片修改宽高时, 只需要修改一个, 另一个会自动改变
          img {
            display: block;
            margin: 0 auto;
            width: 200px;
          }
        }
        .m-right {
          display: flex;
          flex-direction: column;
          justify-content: start;
          margin-left: 20px;
          .mr-bottom {
            color: #919191;
          }
        }
      }
      // 顶部 - 中间标签功能
      .main-medium {
        width: 40%;
        margin-left: 30px;
        // ^ 用户模块 - 添加标签 - 小标签样式
        .el-tag--light {
          margin: 0 8px 8px 0 !important;
        }
      }
      // 底部 - 评分模块
      .main-right {
        flex: 1;
        height: 100px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;
      }
    }

  }

  // 底部主体模块 - 卡片样式
  .el-card {
    margin-bottom: 15px;
  }

  // 底部主体模块 - 左侧大板块样式
  .bottom-left {
    padding-right: 15px;
    .my-date {
      padding: 6px;
      display: flex;
      justify-content: space-between;
      // 日历休息标签样式
      .activeRest {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 16px;
        text-align: center;
        padding: 2px;
        font-size: 12px;
        color: #ffffff;
        border-radius: 50%;
        background-color: orange;
      }
    }

  }

  // 帮助链接
  .last {
    .l-header {
      font-size: 25px;
        font-weight: 600;
      span {
        border-bottom: 5px solid #767aea;
        padding-bottom: 10px;
        }
      }
    .l-main {
      margin-top: 25px;
    }
  }

}
</style>
